<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="list"></ul>
		<script type="text/javascript">
			var oUl = document.getElementById('list'),
				// 第二种
				// div = document.createElement('div');
				// 第三种
				// oFrag = document.createDocumentFragment();
				list = '';
			
			for (var i = 0; i < 10000; i++){
				// var oLi = document.createElement('li');
				// oLi.innerHTML = i + '、这是第' + i + '个项目';
				// 第一种，但是受页面回流的影响，对渲染引擎性能影响极大
				// oUl.appendChild(oLi);
				// 第二种，多了个多余的div
				// div.appendChild(oLi);
				// 第三种
				// oFrag.appendChild(oLi);
				
				// 第四种 字符串的拼接
				list += '<li>' + i + '、这是第' + i + '个项目' + '</li>';
			}
			// 第二种
			// oUl.appendChild(div);
			// 第三种
			// oUl.appendChild(oFrag);
			oUl.innerHTML = list;
			
		</script>
	</body>
</html>
